/**
 * Created by sunzhijun on 2019/02/19.
 */
import React, {Component} from 'react';
import {base} from 'nc-lightapp-front';
import ReferSearch from 'src/hrpub/common/components/referSearch/org';
import NCBackBtn from "src/hrpub/common/components/hr-back/index";
import './index.less';

const {NCSelect} = base;
const NCOption = NCSelect.NCOption;

class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            appCode: props.appCode,
            isCardFormPage: false, //是否是cardFormPage及显示分页器
            isCardPaginationVisible: false //是否显示卡片翻页区域
        }
        this.showHeadLeftFn = this.showHeadLeftFn.bind(this);
        this.handleBackBtn = this.handleBackBtn.bind(this);
        this.setCardPagination = this.setCardPagination.bind(this);
        this.setCardPaginationVisibleFn = this.setCardPaginationVisibleFn.bind(this);
        this.getCardFormId = this.getCardFormId.bind(this);
    }

    componentDidMount() {
    }

    //查询主组织 节点信息
    searchOrganization(val) {
        this.setState({
            orgValue: val
        }, () => {
            this.props.searchOrganizationChange && this.props.searchOrganizationChange(val);
        })
    }

    //给组织赋值
    setOrganizationValue(orgData) {
        this.setState({
            orgValue: orgData
        })
    }

    //设置卡片翻页
    setCardPagination(pk_psndoc_sub) {
        let {cardPagination} = this.props;
        if (typeof (pk_psndoc_sub) == 'object' && pk_psndoc_sub.constructor == Array) {
            pk_psndoc_sub = pk_psndoc_sub.toString();
        }
        cardPagination.setCardPaginationId({id: pk_psndoc_sub, status: 1});
    }

    //卡片翻页事件
    handlePageChange(props, pks) {
        this.props.handleCardPagination && this.props.handleCardPagination(pks);
    }

    //操作按钮事件
    handleBotton(a, b) {
        this.props.onBtnOperation && this.props.onBtnOperation(a, b);
    }

    //设置查询组织和返回按钮显示隐藏
    showHeadLeftFn(isShow, pk_psndoc_sub) {
        this.setState({
            isCardFormPage: isShow,
            isCardPaginationVisible: isShow
        }, () => {
            if (!!pk_psndoc_sub) {
                this.setCardPagination(pk_psndoc_sub);
            }
        })
    }

    //获取CardForm Id
    getCardFormId(id) {
        this.setState({
            cardFormId: id
        })
    }

    //点击返回按钮事件
    handleBackBtn() {
        let {cardFormId} = this.state;
        let status = this.props.form.getFormStatus(cardFormId);
        if (status == 'edit') {
            this.props.cancelEditStatus && this.props.cancelEditStatus();
        } else {
            this.setState({
                isCardFormPage: false,
                isCardPaginationVisible: false
            })
            this.props.handleBackClick && this.props.handleBackClick();
        }
    }

    //设置卡片翻页显示隐藏
    setCardPaginationVisibleFn(isShow) {
        this.setState({
            isCardPaginationVisible: isShow
        })
    }

    //渲染协议类型
    renderAgreementType(data) {
        let dataArr;
        if (typeof (data) === 'string') {
            dataArr = JSON.parse(data);
        } else {
            dataArr = data;
        }
        // let{ json } = this.props;
        let defaultValue = dataArr && dataArr[0].name;
        if (defaultValue) {
            return (
                <NCSelect
                    defaultValue={defaultValue}
                    style={{width: 150, marginRight: 6}}
                    onSelect={this.handleSelectAgreementType.bind(this)}
                >
                    {
                        dataArr && dataArr.map((v, i) => {
                            return (
                                <NCOption key={v.code} value={v.code}>{v.name}</NCOption>
                            )
                        })
                    }
                    {/* <NCOption value="secrerycont">{json['hrcm-000037']}</NCOption>
                    <NCOption value="traincont">{json['hrcm-000038']}</NCOption> */}
                </NCSelect>
            )
        }

    }

    //选择协议类型
    handleSelectAgreementType(v) {
        this.props.selectAgreementType && this.props.selectAgreementType(v)
    }

    //获取header 区域高度
    getHeaderH() {
        return this.refs.getHeaderDom.offsetHeight;
    }

    render() {
        let {button, cardPagination, json, agremeentTypeData, agreementType} = this.props;
        let {isCardFormPage, isCardPaginationVisible, orgValue} = this.state;
        let {createButtonApp} = button;
        const {createCardPagination} = cardPagination;
        return (
            <div className="header nc-bill-header-area" ref="getHeaderDom">
                <div className={'leftDepartmentChoose'}>
                    <div className={isCardFormPage ? '' : 'hide'}>
                        <NCBackBtn onClick={this.handleBackBtn}> </NCBackBtn>
                    </div>
                    <div className={isCardFormPage ? 'hide' : ''}>
                        <div className="refer-search">
                            {agreementType && <ReferSearch
                                orgVal={orgValue}
                                getOrgData={this.searchOrganization.bind(this)}
                            />}
                        </div>
                        <div className="select-type">
                            {this.renderAgreementType(agremeentTypeData)}
                        </div>
                    </div>
                </div>
                {/* 按钮区  btn-group */}
                <div className="btn-group">
                    {createButtonApp({
                        area: 'head',//按钮注册中的按钮区域
                        buttonLimit: 1,
                        onButtonClick: (props, btncode) => this.handleBotton(props, btncode),
                        popContainer: document.querySelector('.header-button-area')
                    })}

                    <div className="pagination-card" style={{display: isCardPaginationVisible ? '' : 'none'}}>
                        {createCardPagination({
                            handlePageInfoChange: this.handlePageChange.bind(this)
                        })}
                    </div>
                </div>
            </div>
        )
    }
}

export default Header;